<template>
  <div class="detail-container">
    <!-- Left Section -->
    <div class="left-section">
      <!-- App Image -->
      <div class="app-image">
        <!-- <img src="../../assets/home/shuzigl.jpg" alt="App Image" width="200" height="200"> -->
        <img src="../../assets/home/appIntroduction/maidi-app.jpg" alt="App Image" width="200" height="200">
      </div>

      <!-- Download Button -->
      <button class="download-btn">扫码下载</button>

      <!-- Info Items -->
      <div class="info-item">
        <div class="info-label">上架时间</div>
        <div class="info-content">2023-10-10</div>
      </div>

      <div class="info-item">
        <div class="info-label">综合评分</div>
        <div class="info-content">
          <span class="star">★</span>
          <span class="star">★</span>
          <span class="star">★</span>
          <span class="star">★</span>
          <span class="star">☆</span>
        </div>
      </div>

      <div class="info-item">
        <div class="info-label">分类</div>
        <div class="info-content">工业软件/采购供应</div>
      </div>

      <div class="info-item">
        <div class="info-label">版本</div>
        <div class="info-content">V1.0.0.1</div>
      </div>

      <div class="info-item">
        <div class="info-label">协议</div>
        <div class="info-content">迈迪智能应用服务协议</div>
      </div>

      <div class="info-item">
        <div class="info-label">联系方式</div>
        <div class="info-content">
          <div>13387839869</div>
          <div>service@yamdyun.com</div>
        </div>
      </div>
    </div>

    <!-- Right Section -->
    <div class="right-section">
      <!-- Title -->
      <h1 class="app-title">供应链协同</h1>

      <!-- Description -->
      <p class="app-description">
        实现供应链系统和企业生产系统精准对接和人、机、物全面互联，进而实现跨企业、跨地区、跨行业的产品全生命周期的管理，促进信息资源的集成共享。
      </p>

      <!-- Subtitle -->
      <h2 class="subtitle">应用介绍</h2>

      <!-- Content -->
      <p class="content-text">
        基于工业互联网标识，打通供应链上下游，有助于工业互联网能够深入渗透能源、交通、农业、医疗等多个领域，为其提供新型通用基础设施支撑，促进各类资源要素优化配置和产业链紧密协同，加速各领域数字化进程，催生产业发展新模式新业态、新产业体系形成，并产生海量数据，为数字经济繁荣发展提供关键要素。
      </p>

      <!-- Images -->
      <div class="app-images">
        <img src="@/assets/app-center/xq1.jpg"  alt="App Screenshot 1" width="870" height="435">
<!--        <img src="@/assets/app-center/xq2.png" alt="App Screenshot 2" width="870" height="435">-->
<!--        <img src="@/assets/app-center/xq3.png" alt="App Screenshot 3" width="870" height="435">-->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AppDetail'
}
</script>

<style scoped>
.detail-container {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  text-align: left;
}

.left-section {
  width: 300px;
  margin-right: 30px;
  flex-shrink: 0;
}

.right-section {
  flex-grow: 1;
}

.app-image img {
  border: 1px solid #eee;
  border-radius: 4px;
  margin-bottom: 20px;
}

.download-btn {
  width: 200px;
  padding: 10px 0;
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  margin-bottom: 30px;
  cursor: pointer;
  transition: background 0.3s;
}

.download-btn:hover {
  background: #40a9ff;
}

.info-item {
  margin-bottom: 25px;
}

.info-label {
  font-size: 14px;
  color: black;
  font-weight: bold;
  margin-bottom: 5px;
}

.info-content {
  font-size: 16px;
  color: #333;
}

.star {
  color: #ffc107;
  font-size: 18px;
}

.app-title {
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
}

.app-description {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 30px;
}

.subtitle {
  font-size: 20px;
  color: #333;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.content-text {
  font-size: 16px;
  color: #333;
  line-height: 1.8;
  margin-bottom: 30px;
}

.app-images img {
  margin-bottom: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .detail-container {
    flex-direction: column;
  }

  .left-section {
    width: 100%;
    margin-right: 0;
    margin-bottom: 30px;
  }

  .app-images img {
    width: 100%;
    height: auto;
  }
}
</style>